<script setup lang="ts">
import * as Enums from '@firewall/engine/Enums';
import { onMounted } from 'vue';

interface Props {
  version?: string
}
const props = withDefaults(defineProps<Props>(), {
  version: () => '',
});
type Emit = {
  (e: 'update:version', version: string): void,
}
const emit = defineEmits<Emit>();

onMounted(() => {
  emit('update:version', Enums.IpVersion.V4);
});

const onSelectorChange = (version: string) => {
  emit('update:version', version);
};
</script>

<template>
  <ElRadioGroup
    :model-value="props.version"
    @change="onSelectorChange"
  >
    <ElRadioButton :label="Enums.IpVersion.V4">IPv4</ElRadioButton>
    <ElRadioButton :label="Enums.IpVersion.V6">IPv6</ElRadioButton>
  </ElRadioGroup>
</template>
